<template>
	<view class="box">
		<u-navbar :is-back="true" title="积分明细" :border-bottom="false" :title-bold="true"></u-navbar>
		<u-tabs :list="tabList" :is-scroll="false" v-model="current" @change="change" active-color="#FA453C" inactive-color="#606266"></u-tabs>
		<view class="list container_br" v-if="list.length>0" v-for="item in list" :key="item.id">
			<view class="top jsbc">
				<view class="left">
					{{item.title}}
				</view>
				<view class="right">
					<span>{{item.type==2?'+':'-'}}</span>{{item.amount}}
				</view>
			</view>
			<view class="bottom jsbc">
				<view class="left">
					{{item.created_at}}
				</view>
				<view class="right">
					<span v-if="item.type==5">兑换商品</span>
					<span v-if="item.type==2">分销收益</span>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	import {
		closeload,
		toastload
	} from '../../utils/common';
	import {
		getPointBills,getBills
	} from '@/api/index.js'
	export default {
		data() {
			return {
				list: [],
				page: 1,
				flag: false,
				current: 0.,
				tabList: [{
						name: '兑换'
					},
					{
						name: '收益'
					}
				]
			};
		},
		onReachBottom() {
			if (this.flag) {
				if(this.current==0){
					this.getData()
				}else{
					this.getDatas()
				}
			}
		},
		onLoad() {
			this.getData()
		},
		methods: {
			getData() {
				toastload()
				getPointBills({
					page: this.page,
					limit: 20
				}).then(res => {
					console.log("余额", res);
					if (res.last_page > res.page) {
						this.page++
						this.flag = true
					} else {
						this.flag = false
					}
					res.list.forEach(item => {
						this.list.push(item)
					})
					closeload()
				})
			},
			change(index) {
				this.current = index
				this.page = 1
				this.flag = false
				this.list =[]
				if (index == 0) {
					this.getData()
				}else{
					this.getDatas()
				}
				console.log("index", index);
			},
			getDatas() {
				getBills(2, {
					page: this.page,
					limit: 20
				}).then(res => {
					console.log("余额", res);
					if (res.last_page > res.page) {
						this.page++
						this.flag = true
					} else {
						this.flag = false
					}
					res.list.forEach(item => {
						this.list.push(item)
					})
					closeload()
				})
			}
		}

	}
</script>

<style lang="scss">
	.left {
		max-width: 450rpx;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}
</style>